<template>
  <div class="ly-box">
    <h1 class="wyjf-title">房间信息</h1>
    <div class="tips">当前小区 <span>{{name}}</span></div>
    <div class="tips">我的房间信息 <span>（左滑可删除房间）</span></div>
    <yd-cell-group>
      <slip-del v-for="item in roomList" :key="item.id" ref="slipDel" del-text="删除房间" @slip-open="slipOpen"
                @del-click="del(item.id)">
        <div class="demo-item">
          <yd-cell-item>
            <span slot="left">{{item.roomInfo}}</span>
            <span slot="right">{{item.room}}</span>
            <yd-button v-if="item.isEffective==-1" slot="right" style="margin-left: 0.2rem;"
                       @click.native="goAuthentication(item.roomId)" type="primary">认证
            </yd-button>
            <yd-button v-if="item.isEffective==2" slot="right" style="margin-left: 0.2rem;"
                       @click.native="goAuthentication(item.roomId)" type="primary">未通过，重新认证
            </yd-button>
            <yd-button v-if="item.isEffective==3" slot="right" style="margin-left: 0.2rem;"
                       type="primary">审核中
            </yd-button>
            <yd-button v-if="item.isEffective==1" slot="right" style="margin-left: 0.2rem;"
                       type="primary" bgcolor="#03a9f4" color="#fff">已认证
            </yd-button>
          </yd-cell-item>
        </div>
        <div slot="del" style="line-height: 1rem;text-align: center;">删除房间</div>
      </slip-del>
    </yd-cell-group>
    <yd-button size="large" type="primary" class="wyjf-btn" @click.native="addRoom">+添加房间信息</yd-button>
  </div>
</template>

<script>
  import http from "../../http";
  import SlipDel from 'vue-slip-delete';
  import storage from "../../store/storage.js";

  export default {
    components: {
      SlipDel
    },
    data() {
      return {
        roomList: [],
        name: '',
      };
    },
    created: function () {
      this.init();
    },
    methods: {
      init: function () {
        this.name = storage.getObj("housingId").name;
        // this.$dialog.loading.open('数据加载中');
        const housingId = storage.getObj("housingId").id;
        http.get("/communityApps/personalCenter/rooms?housingId=" + housingId).then(res => {
          // this.$dialog.loading.close();
          if (res.data.code == 20000) {
            this.roomList = res.data.data;
          } else {
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1500
            });
          }
        });
      },
      addRoom: function () {
        this.$router.push("/user/addRoom");
      },
      goAuthentication: function (roomId) {
        this.$router.push({path: "/user/authentication", query: {roomId: roomId}});
      },
      slipOpen(vm) {
        // 无需手动关闭
      },
      del(id) {
        // 删除回调
        http.get("/communityApps/personalCenter/delete?id=" + id).then(res => {
          if (res.data.code == 20000) {
            this.$dialog.toast({
              mes: '删除成功',
              timeout: 1500,
              icon: 'success',
              callback: () => {
                this.init();
              }
            });
          } else {
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1500
            });
          }
        });
      },
    }
  }
  ;
</script>


<style scoped lang="scss">


  .wyjf-title {
    font-size: 0.48rem;
    font-weight: normal;
    color: #04be02;
    text-align: center;
    line-height: 1rem;
  }

  .tips {
    padding: .05rem .24rem .1rem;
    font-size: .28rem;
    text-align: left;
    color: #888;
    position: relative;
    z-index: 1;
    span {
      font-size: 0.24rem;
      color: red;
    }
  }

  .wyjf-btn {
    width: 86%;
    margin: 0.5rem auto 0;
  }

</style>
